<template>
  <!--基金列表为空时显示如下-->
  <el-form-item style="height: 30px;" v-if="!funds.length" label="基金资助(可选)">
    <span v-if="!showAdd" style="color: red;font-style: italic;font-weight: bold;margin-left: 43%;font-size: 16px">无</span>
    <div v-else style="margin-top: 5px; width: 100%;">
      <el-input v-model="id" style="width: 35%;float: right;margin-left: 10px" placeholder="输入编号" @input="checkIdInput"/>
      <el-input v-model="name" style="width: 63%;float: right" placeholder="输入名称"/>
    </div>
    <div class="no-fund-two-button">
      <el-button size="small" @click="showAdd=false" v-if="showAdd">取消</el-button>
      <el-button size="small" style="margin-right: 10px" @click="work">{{ showAdd ? '确定' : '新增' }}</el-button>
    </div>
  </el-form-item>

  <!--基金列表不为空时显示如下-->
  <el-form v-else label-position="top">
    <el-form-item class="infinite-list" :label="'基金资助(可选)'+(doc?.id?'【对基金的修改会实时更新】':'')">
      <div class="infinite-list-item" v-for="(fd,i) in funds" :key="i">
        <el-tooltip class="box-item" effect="light" :content="fd.name+' 【编号：'+fd.fundId+'】'" placement="top-start">
          <el-text style="max-width: 85%" truncated>{{ fd.name }}【编号：{{ fd.fundId }}】</el-text>
        </el-tooltip>
        <el-button size="small" @click="delFund(i)" type="info" class="delete-button">删除</el-button>
      </div>
      <div v-if="showAdd" style="margin-top: 5px; width: 100%;">
        <el-input v-model="id" class="input-fund-id" placeholder="输入编号" @input="checkIdInput"/>
        <el-input v-model="name" class="input-fund-name" placeholder="输入名称" @input="checkNameInput"/>
      </div>
      <el-button class="canal-button" size="small" @click="canal" v-if="showAdd">取消</el-button>
      <el-button class="add-button" :style="{marginLeft:(!showAdd?'auto':'')}" size="small" @click="work">{{ showAdd ? '确定' : '新增' }}</el-button>
    </el-form-item>
  </el-form>
  <br v-if="!funds.length&&showAdd">
  <br v-if="!funds.length&&showAdd">
</template>

<script setup>
import {defineModel, ref, inject} from "vue";
import {ElMessage} from "element-plus";
import {delFundWhenModifyDocApi, putFundWhenModifyDocApi} from "@/apis/fund";

const vis = new Map()
const funds = defineModel()
const doc = inject('doc')

const delFund = (j) => {
  const len = funds.value.length
  if (0 <= j && j < len && confirm('确定要删除基金：' + funds.value[j].name + '?')) {
    vis[funds.value[j].fundId] = false
    if (doc?.value?.id) { // 如果是在修改文档界面之下，则直接动态请求删除
      delFundWhenModifyDocApi(doc.value.id, funds.value[j].id).then(resp => {
        if (resp.data.code === 200) {
          funds.value.splice(j, 1);
        } else {
          ElMessage.error(resp.data.msg)
        }
      })
    } else { // 否则就只在前端修改
      funds.value.splice(j, 1);
    }
  }
}

const name = ref(''), id = ref('')
const showAdd = ref(false)
const checkIdInput = () => {
  if (id.value && id.value[0] === '-') id.value = id.value.substring(1)
  if (id.value) {
    id.value = id.value.replace(' ', '')
    id.value = id.value.replace(/[^a-zA-Z0-9-]/g, ''); // 移除非中文字符和中英文分号
    id.value = id.value.replace('--', '-')
  }
}

const checkNameInput = () => {
  if (name.value && name.value[0] === '-') id.value = id.value.substring(1)
  if (name.value) {
    name.value = name.value.replace(' ', '')
  }
}

const putFund = (fund) => {
  vis[id.value] = name.value
  funds.value.push(fund)
  name.value = id.value = ''
  showAdd.value = false
}

const canal = () => showAdd.value = false

const work = () => {
  if (showAdd.value) {
    if (name.value && id.value) {
      if (vis[id.value]) {
        ElMessage.error(`重复添加【已经存在相同编号的基金：${vis[id.value]}】`)
        return
      }
      const fund = {fundId: id.value, name: name.value}
      if (doc?.value?.id) { // 如果是在修改文档界面之下，则直接动态请求删除
        putFundWhenModifyDocApi(doc.value.id, fund).then(resp => {
          if (resp.data.code === 200) {
            putFund(resp.data.data)
          } else {
            ElMessage.error(resp.data.msg)
          }
        })
      } else { // 否则直接在前端修改即可
        putFund(fund)
      }
    } else {
      ElMessage.error('格式错误')
    }
  } else {
    showAdd.value = true
  }
}
</script>

<style scoped>
.no-fund-two-button {
  display: flex;
  align-items: center;
  justify-content: right;
  margin-left: auto;
  margin-top: 5px;
}

.input-fund-id {
  width: 35%;
  float: right;
  margin-left: 10px;
}

.input-fund-name {
  width: 63%;
  float: right;
}

.delete-button {
  margin-left: auto;
  margin-right: 10px;
}

.add-button {
  float: right;
  margin-top: 5px;
  margin-right: 10px;
}

.canal-button {
  float: right;
  margin-top: 5px;
  margin-left: auto;
}

.infinite-list {
  padding: 3px;
  margin: 1px;
  list-style: none;
}

.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
  font-size: 17px;
  margin: 5px 2px 2px;
  height: 30px;
  width: 100%
}

.infinite-list .infinite-list-item:hover {
  background-color: #f2f2f2;
  cursor: pointer;
}

</style>